﻿
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<style>
    
    .tab-div{
        display:none;
    }
    .current {
        display:block;
    }
</style>

<div style="height:2000px;">
    <button type="button" class="tab-button">任务一</button>
    <button type="button" class="tab-button">任务二</button>
    <button type="button" class="tab-button">任务三</button>
    <button type="button" class="tab-button">任务四</button>
    <button type="button" class="tab-button">任务五</button>
    <button type="button" class="tab-button">任务六</button>

    <div id="jobSumPage" style="height: 500px;width: 1200px;" class="tab-div" ></div>
    <div id="educationPage" style="height: 500px;width: 1200px;" class="tab-div current"></div>
    <div id="initSalaryPage" style="height:500px;width:1200px;" class="tab-div"></div>
    <div id="avgSalaryPage" style="height:500px;width:800px;" class="tab-div"></div>
    <div id="companyTypePage" style="height:500px;width:1200px;" class="tab-div"></div>
    <div id="industrySumPage" style="height:2000px;width:1200px;" class="tab-div"></div>
</div>


<script src="~/Scripts/echarts.min.js"></script>
<script>
    // 获取按钮对象
    var btns = document.getElementsByClassName('tab-button');
    var divs = document.getElementsByClassName('tab-div');
    for (var i = 0; i < btns.length; ++i) {
        btns[i].onclick = function () {
            for (var i = 0; i < divs.length; i++) {
                if (btns[i] == this) {
                    divs[i].classList.add('current');
                } else {
                    divs[i].classList.remove('current');
                }
            }
        }
    }
</script>
<script>
    jobSum();
    educationSum();
    initSalary();
    avgSalary();
    companyType();
    industrySum();

    function jobSum() {
        var dom = document.getElementById("jobSumPage");
	    var myChart = echarts.init(dom);
	    var app = {};
	    var option;
        option = {
            title: {
                text: '各类职位数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: ''
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '数据统计',
                type: 'pie',
                radius: '50%',
                data: [{
                    value: @ViewBag.javaSum,
                    name: 'JAVA工程师'
                },
                {
                    value: @ViewBag.netSum,
                    name: '.NET工程师'
                },
                {
                    value: @ViewBag.phpSum,
                    name: 'PHP工程师'
                }
                ],
                //emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b}:{c}({d}%)'
                            },
                            labelLine: { show: true }
                        }
                    }
                    
                //}
            }]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    function educationSum() {
        var dom = document.getElementById("educationPage");
        var myChart = echarts.init(dom);
        var app = {};
        var option;
        option = {
            title: {
                text: '学历分布图',
                subtext: '企业个数'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Rainfall', 'Evaporation']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: ["无需学历", "中专", "高中", "大专", "本科", "硕士"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'PHP',
                    type: 'bar',
                    data: [ @ViewBag.phpEducationBackground ],
                },
                {
                    name: 'JAVA',
                    type: 'bar',
                    data: [ @ViewBag.javaEducationBackground ],
                },
                {
                    name: '.NET',
                    type: 'bar',
                    data: [ @ViewBag.netEducationBackground ],
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    function initSalary() {
        var chartDom = document.getElementById('initSalaryPage');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: 'java vs net vs php',
                subtext: 'Fake Data'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['PHP','JAVA', '.NET']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    // prettier-ignore
                    data: ['5k以下', '5k-10k', '10k-15k', '15k-20k', '20k以上']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'PHP',
                    type: 'bar',
                    data: [ @ViewBag.phpInitSalary ],
                },
                {
                    name: 'JAVA',
                    type: 'bar',
                    data: [ @ViewBag.javaInitSalary ],
                },
                {
                    name: '.NET',
                    type: 'bar',
                    data: [ @ViewBag.netInitSalary ],
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    function avgSalary() {
        var chartDom = document.getElementById('avgSalaryPage');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '平均工资',
                subtext: '单位：千'
            },
            xAxis: {
                type: 'category',
                data: ['PHP', 'JAVA', '.NET']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [ @ViewBag.avgSalary ],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    function companyType() {
        var chartDom = document.getElementById('companyTypePage');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '公司类型统计图',
                subtext: 'Fake Data'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {type:'cross'}
            },
            legend: {
                data: ['PHP','JAVA', '.NET']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: [ 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    axisLabel: {
                        interval: 0
                    },
                    data: [
                        '合资',
                        '民营公司',
                        '国企',
                        '外资（欧美）',
                        '外资（非欧美）',
                        '非营利组织',
                        '上市公司',
                        '创业公司',
                        '事业单位',
                        '外企代表处'
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '企业数量',
                    axisLabel: {
                        formatter:'{value}个'
                    }
                }
            ],
            series: [
                {
                    name: 'PHP',
                    type: 'bar',
                    data: [ @ViewBag.phpCompanyType ],
                },
                {
                    name: 'JAVA',
                    type: 'bar',
                    data: [ @ViewBag.javaCompanyType ],
                },
                {
                    name: '.NET',
                    type: 'bar',
                    data: [ @ViewBag.netCompanyType ],
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }

    function industrySum() {
        var keyStr = "@ViewBag.industryStrKey";
        var item = keyStr.split(",");
        var chartDom = document.getElementById('industrySumPage');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '行业分布图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: item
            },
            series: [
                {
                    name: 'PHP',
                    type: 'bar',
                    data: [ @ViewBag.phpIndustryStrValue ]
                },
                {
                    name: 'JAVA',
                    type: 'bar',
                    data: [ @ViewBag.javaIndustryStrValue ]
                },
                {
                    name: '.NET',
                    type: 'bar',
                    data: [ @ViewBag.netIndustryStrValue ]
                }
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    }


</script>